<template>
  <div class="head-t">
    <To></To>
    <section>
      <dl v-for='(item,key) in arr' @click="tian(item)">
        <!-- <router-link :to="'/xiang?id='+item.id"> -->
        <dt><img :src="'https://elm.cangdu.org/img/'+item.image_path"alt=""></dt>
        <dd>
          <div class='yo' >
            <h3>{{item.name}}</h3>
            <h4 v-show='item.is_premium'>品牌</h4>
          </div>
          <div>
            <span v-for='(v,key) in item.supports'>
              {{v.icon_name}}
            </span>
            <p v-for='(v,key) in item.supports' v-if=' v.name=="准时达" '>
              {{v.name}}                                                                                                                                                         
            </p>
            <p>
              {{item.delivery_mode.text}}
            </p>
          </div>
        </dd>
        <!-- </router-link> -->
      </dl>
    </section>
    <Footer></Footer>
  </div>
</template>

<script>
import To from '../components/To'
import Footer from '../components/Footer'
import axios from 'axios'
export default {
  name: 'Head-t',
  components: { To, Footer },
  data () {
    return {
      arr: [],
    }
  },
  mounted () {
    axios.get('https://elm.cangdu.org/shopping/restaurants?latitude=45.761089&longitude=126.631908').then((msg) => {
      console.log(msg);
      this.arr = msg.data
      console.log(msg.data);
    })
  },
  methods: {
    tian(item){
      this.$router.push({name:'/xian',path:'/xian',query:{id:item.id}})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
html,
body,
.head-t {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
section {
  height: 100%;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;

  dl {
    width: 4.8rem;
    height: 1.3rem;
    border: 0.01rem solid red;
    display: flex;
    dd {
      display: flex;
      font-size: 0.2rem;
      .yo {
        display: flex;
      }
      h4 {
        width: 0.34rem;
        height: 0.2rem;
        background: #ffd538;
        font-size: 0.15rem;
      }
    }
  }
}
img {
  width: 0.82rem;
  height: 0.8rem;
}
</style>
